Frontend Progressive Enhancement: Functiedetectie en Polyfills

In het voortdurend evoluerende landschap van webontwikkeling is het waarborgen van een consistente en toegankelijke gebruikerservaring op diverse browsers en apparaten een aanzienlijke uitdaging. Progressive Enhancement (PE) biedt een robuuste strategie om deze uitdaging aan te gaan. Deze aanpak geeft prioriteit aan het leveren van een basisniveau van functionaliteit aan alle gebruikers, terwijl de ervaring selectief wordt verbeterd voor degenen met moderne browsers en apparaten die geavanceerde functies ondersteunen. Dit artikel gaat dieper in op de kernprincipes van progressive enhancement, met de focus op twee cruciale technieken: functiedetectie en polyfills.

Wat is Progressive Enhancement?

Progressive enhancement is niet zomaar een techniek; het is een filosofie die de nadruk legt op het bouwen van websites met toegankelijkheid en kernfunctionaliteit voorop. Het erkent de diversiteit aan user agents die het web benaderen, van oudere browsers met beperkte mogelijkheden tot de nieuwste apparaten met de meest recente technologieën. In plaats van uit te gaan van een homogene omgeving, omarmt PE heterogeniteit.

Het basisprincipe is om te beginnen met een solide, semantische basis van HTML, die ervoor zorgt dat de inhoud toegankelijk en begrijpelijk is op elk apparaat. Vervolgens wordt CSS toegepast om de presentatie te verbeteren, gevolgd door JavaScript om interactieve elementen en geavanceerde functionaliteiten toe te voegen. De sleutel is dat elke laag voortbouwt op de vorige, zonder de kernervaring te verbreken voor gebruikers die de verbeteringen mogelijk niet ondersteunen.

Voordelen van Progressive Enhancement:

• Toegankelijkheid: Zorgt ervoor dat kerninhoud en -functionaliteit beschikbaar zijn voor alle gebruikers, ongeacht hun browser of apparaat. Dit is cruciaal voor gebruikers met een handicap die mogelijk afhankelijk zijn van ondersteunende technologieën.
• Cross-browser compatibiliteit: Biedt een consistente ervaring over een breed scala aan browsers, waardoor het risico op gebroken lay-outs of niet-functionele features wordt geminimaliseerd.
• Verbeterde prestaties: Door eerst een basiservaring te leveren, zijn de initiële laadtijden van de pagina vaak sneller, wat leidt tot een betere gebruikerservaring.
• SEO-voordelen: Zoekmachinecrawlers kunnen de inhoud gemakkelijk openen en indexeren, omdat ze doorgaans geen JavaScript uitvoeren.
• Toekomstbestendigheid: Naarmate nieuwe technologieën opkomen, stelt progressive enhancement u in staat deze geleidelijk te adopteren, zonder de bestaande gebruikerservaring te verstoren.

Functiedetectie: Weten wat uw browser kan doen

Functiedetectie is het proces waarbij programmatisch wordt vastgesteld of een bepaalde browser of user agent een specifieke functie ondersteunt, zoals een CSS-eigenschap, een JavaScript-API of een HTML-element. Het is een betrouwbaardere aanpak dan browser sniffing (het detecteren van de browser op basis van de user agent-string), die gemakkelijk kan worden vervalst en vaak tot onnauwkeurige resultaten leidt.

Waarom functiedetectie belangrijk is:

• Gerichte verbeteringen: Hiermee kunt u verbeteringen alleen toepassen op browsers die deze ondersteunen, waardoor fouten en onnodige code-uitvoering in oudere browsers worden vermeden.
• Graceful Degradation: Als een functie niet wordt ondersteund, kunt u een fallback of alternatieve oplossing bieden, zodat gebruikers nog steeds een bruikbare ervaring hebben.
• Verbeterde prestaties: Voorkomt het uitvoeren van code die afhankelijk is van niet-ondersteunde functies, wat het risico op fouten vermindert en de algehele prestaties verbetert.

Veelgebruikte technieken voor functiedetectie

Er zijn verschillende manieren om functiedetectie in JavaScript uit te voeren:

1. Gebruik van `typeof`

De `typeof`-operator kan worden gebruikt om te controleren of een variabele of object is gedefinieerd. Dit is handig voor het detecteren van het bestaan van globale objecten of functies.

            if (typeof window.localStorage !== 'undefined') {
 // localStorage wordt ondersteund
 console.log('localStorage wordt ondersteund!');
} else {
 // localStorage wordt niet ondersteund
 console.log('localStorage wordt niet ondersteund!');
}
            

              
                Copy
              
            
          

2. Controleren op objecteigenschappen

U kunt controleren of een object een specifieke eigenschap heeft met de `in`-operator of de `hasOwnProperty()`-methode.

            if ('geolocation' in navigator) {
 // Geolocation API wordt ondersteund
 console.log('Geolocation API wordt ondersteund!');
} else {
 // Geolocation API wordt niet ondersteund
 console.log('Geolocation API wordt niet ondersteund!');
}

if (document.createElement('canvas').getContext('2d')) {
 // Canvas wordt ondersteund
 console.log('Canvas wordt ondersteund!');
} else {
 // Canvas wordt niet ondersteund
 console.log('Canvas wordt niet ondersteund!');
}
            

              
                Copy
              
            
          

3. Modernizr

Modernizr is een populaire JavaScript-bibliotheek die functiedetectie vereenvoudigt. Het biedt een uitgebreide set tests voor verschillende HTML5-, CSS3- en JavaScript-functies en voegt klassen toe aan het ``-element om aan te geven welke functies worden ondersteund.

Voorbeeld met Modernizr:

            <!DOCTYPE html>
<html class="no-js"> <!-- Voeg de 'no-js' klasse toe -->
<head>
 <meta charset="utf-8">
 <title>Modernizr Voorbeeld</title>
 <script src="modernizr.js"></script>
</head>
<body>
 <script>
 if (Modernizr.geolocation) {
 // Geolocation API wordt ondersteund
 console.log('Geolocation API wordt ondersteund!');
 } else {
 // Geolocation API wordt niet ondersteund
 console.log('Geolocation API wordt niet ondersteund!');
 }
 </script>
</body>
</html>
            

              
                Copy
              
            
          

Modernizr voegt klassen zoals `.geolocation` of `.no-geolocation` toe aan het ``-element, zodat u CSS-stijlen kunt toepassen op basis van de ondersteuning van functies.

            .geolocation .my-element {
 /* Stijlen voor browsers die geolocatie ondersteunen */
}

.no-geolocation .my-element {
 /* Stijlen voor browsers die geen geolocatie ondersteunen */
}
            

              
                Copy
              
            
          

4. CSS Functie-queries (`@supports`)

CSS functie-queries, die de `@supports`-regel gebruiken, stellen u in staat om conditioneel CSS-stijlen toe te passen op basis van de browserondersteuning voor specifieke CSS-functies. Dit is een krachtige manier om progressive enhancement rechtstreeks in uw CSS te implementeren.

            @supports (display: grid) {
 .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }
}

@supports not (display: grid) {
 .container {
 float: left;
 width: 33.33%;
 }
}
            

              
                Copy
              
            
          

In dit voorbeeld zullen browsers die CSS Grid Layout ondersteunen de op grid gebaseerde lay-out gebruiken, terwijl oudere browsers terugvallen op een op float gebaseerde lay-out.

Polyfills: De kloof overbruggen

Een polyfill (ook bekend als een shim) is een stukje code (meestal JavaScript) dat de functionaliteit van een nieuwere functie biedt op oudere browsers die deze niet native ondersteunen. Met polyfills kunt u moderne functies gebruiken zonder de compatibiliteit met oudere browsers op te offeren.

Waarom polyfills belangrijk zijn:

• Gebruik moderne functies: Hiermee kunt u de nieuwste webtechnologieën gebruiken zonder uw publiek te beperken tot gebruikers met moderne browsers.
• Consistente ervaring: Biedt een consistente gebruikerservaring over verschillende browsers, zelfs als ze verschillende niveaus van functieondersteuning hebben.
• Verbeterde ontwikkelingsworkflow: Hiermee kunt u zich richten op het gebruik van de beste tools en technieken, zonder u zorgen te maken over compatibiliteitsproblemen met browsers.

Veelgebruikte polyfill-technieken

Er zijn verschillende benaderingen voor het implementeren van polyfills, variërend van eenvoudige JavaScript-functies tot complexere bibliotheken.

1. Eenvoudige JavaScript-polyfills

Voor eenvoudige functies kunt u vaak een polyfill maken met JavaScript. De `Array.prototype.forEach`-methode werd bijvoorbeeld geïntroduceerd in ECMAScript 5. Hier is een eenvoudige polyfill voor oudere browsers:

            if (!Array.prototype.forEach) {
 Array.prototype.forEach = function(callback, thisArg) {
 if (this == null) {
 throw new TypeError('this is null or not defined');
 }

 var obj = Object(this);
 var len = obj.length >>> 0;

 if (typeof callback !== 'function') {
 throw new TypeError(callback + ' is not a function');
 }

 var context = thisArg;

 for (var i = 0; i < len; i++) {
 if (i in obj) {
 callback.call(context, obj[i], i, obj);
 }
 }
 };
}
            

              
                Copy
              
            
          

2. Polyfill-bibliotheken gebruiken

Verschillende bibliotheken bieden polyfills voor een breed scala aan functies. Enkele populaire opties zijn:

• core-js: Een uitgebreide polyfill-bibliotheek die veel ECMAScript-functies dekt.
• polyfill.io: Een service die alleen de polyfills levert die nodig zijn voor de browser van de gebruiker, op basis van de user agent.
• es5-shim: Biedt polyfills voor ECMAScript 5-functies.

Voorbeeld met core-js:

            <script src="https://cdn.jsdelivr.net/npm/core-js@3.36.0/index.min.js"></script>
            

              
                Copy
              
            
          

Dit omvat de core-js bibliotheek vanaf een CDN. U kunt dan moderne JavaScript-functies gebruiken, en core-js zal automatisch de nodige polyfills leveren voor oudere browsers.

3. `polyfill.io`-service

Polyfill.io is een service die de user-agentstring gebruikt om te bepalen welke polyfills nodig zijn en levert alleen die polyfills aan de browser. Dit kan de grootte van de polyfill-bundel aanzienlijk verminderen en de prestaties verbeteren.

            <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
            

              
                Copy
              
            
          

U kunt de functies specificeren die u wilt polyfillen met de `features`-parameter. `features=es6` zal bijvoorbeeld alle ECMAScript 6-functies polyfillen.

De juiste polyfills kiezen

Het is belangrijk om polyfills zorgvuldig te kiezen, omdat het opnemen van onnodige polyfills de grootte van uw JavaScript-bundel kan vergroten en de prestaties kan beïnvloeden. Houd rekening met de volgende factoren:

• Doelbrowsers: Identificeer de browsers die u moet ondersteunen en kies polyfills die de ontbrekende functies in die browsers aanpakken.
• Bundelgrootte: Minimaliseer de grootte van uw polyfill-bundel door een service zoals polyfill.io te gebruiken of selectief alleen de noodzakelijke polyfills op te nemen.
• Onderhoud: Kies polyfill-bibliotheken die actief worden onderhouden en bijgewerkt met de nieuwste browserfuncties.
• Testen: Test uw website grondig op verschillende browsers om ervoor te zorgen dat de polyfills correct werken.

Voorbeelden van Progressive Enhancement in de praktijk

Laten we enkele praktische voorbeelden bekijken van hoe progressive enhancement kan worden toegepast in real-world scenario's:

1. HTML5-formuliervalidatie

HTML5 introduceerde ingebouwde formuliervalidatie-attributen zoals `required`, `email` en `pattern`. Moderne browsers zullen foutmeldingen weergeven als niet aan deze attributen wordt voldaan. Oudere browsers zullen deze attributen echter negeren. Progressive enhancement kan worden gebruikt om een fallback-oplossing te bieden voor oudere browsers.

HTML:

            <form action="/submit" method="post">
 <label for="email">E-mail:</label>
 <input type="email" id="email" name="email" required>
 <button type="submit">Verzenden</button>
</form>
            

              
                Copy
              
            
          

JavaScript (Polyfill):

            if (!('required' in document.createElement('input'))) {
 // HTML5-formuliervalidatie wordt niet ondersteund
 var form = document.querySelector('form');
 form.addEventListener('submit', function(event) {
 var email = document.getElementById('email');
 if (!email.value) {
 alert('Voer alstublieft uw e-mailadres in.');
 event.preventDefault();
 }
 });
}
            

              
                Copy
              
            
          

In dit voorbeeld controleert de JavaScript-code of het `required`-attribuut wordt ondersteund. Zo niet, dan voegt het een event listener toe aan het formulier die basis e-mailvalidatie uitvoert en een waarschuwingsbericht weergeeft als het e-mailveld leeg is.

2. CSS3-transities

Met CSS3-transities kunt u vloeiende animaties maken wanneer CSS-eigenschappen veranderen. Oudere browsers ondersteunen mogelijk geen CSS3-transities. Progressive enhancement kan worden gebruikt om een fallback te bieden voor deze browsers.

CSS:

            .my-element {
 width: 100px;
 height: 100px;
 background-color: blue;
 transition: width 0.5s ease-in-out;
}

.my-element:hover {
 width: 200px;
}
            

              
                Copy
              
            
          

JavaScript (Fallback):

            if (!('transition' in document.documentElement.style)) {
 // CSS3-transities worden niet ondersteund
 var element = document.querySelector('.my-element');
 element.addEventListener('mouseover', function() {
 element.style.width = '200px';
 });
 element.addEventListener('mouseout', function() {
 element.style.width = '100px';
 });
}
            

              
                Copy
              
            
          

In dit voorbeeld controleert de JavaScript-code of CSS3-transities worden ondersteund. Zo niet, dan voegt het event listeners toe aan het element die de `width`-eigenschap direct manipuleren bij hover, wat een basis animatie-effect geeft.

3. Web Storage (localStorage)

Web Storage (localStorage en sessionStorage) biedt een manier om gegevens lokaal in de browser van de gebruiker op te slaan. Oudere browsers ondersteunen mogelijk geen Web Storage. Progressive enhancement kan worden gebruikt om een fallback te bieden met behulp van cookies.

            function setItem(key, value) {
 if (typeof localStorage !== 'undefined') {
 localStorage.setItem(key, value);
 } else {
 // Gebruik cookies als fallback
 document.cookie = key + '=' + value + '; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
 }
}

function getItem(key) {
 if (typeof localStorage !== 'undefined') {
 return localStorage.getItem(key);
 } else {
 // Lees uit cookies
 var name = key + "=";
 var decodedCookie = decodeURIComponent(document.cookie);
 var ca = decodedCookie.split(';');
 for(var i = 0; i <ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return "";
 }
}
            

              
                Copy
              
            
          

Dit voorbeeld laat zien hoe u items kunt instellen en ophalen met localStorage als dit wordt ondersteund, en terugvalt op het gebruik van cookies als dat niet het geval is.

Overwegingen bij internationalisering

Houd bij het implementeren van progressive enhancement voor een wereldwijd publiek rekening met de volgende internationaliseringsaspecten:

• Taalondersteuning: Zorg ervoor dat uw polyfills en fallbacks verschillende talen en tekensets ondersteunen.
• Lokalisatie: Gebruik lokalisatietechnieken om vertaalde foutmeldingen en gebruikersinterface-elementen te bieden.
• Toegankelijkheid: Volg toegankelijkheidsrichtlijnen (WCAG) om ervoor te zorgen dat uw website bruikbaar is voor mensen met een handicap, ongeacht hun locatie of taal.
• Testen: Test uw website grondig in verschillende talen en regio's om ervoor te zorgen dat de progressive enhancement-technieken correct werken.
• Culturele gevoeligheid: Wees u bewust van culturele verschillen en vermijd het gebruik van idiomen of metaforen die in andere culturen mogelijk niet worden begrepen. Bijvoorbeeld, datumnotaties variëren per cultuur (MM/DD/YYYY vs DD/MM/YYYY). Gebruik een bibliotheek zoals Moment.js of iets dergelijks om datumnotatie correct af te handelen.

Tools en bronnen

• Modernizr: Een JavaScript-bibliotheek voor functiedetectie. (https://modernizr.com/)
• core-js: Een modulaire standaardbibliotheek voor JavaScript. (https://github.com/zloirock/core-js)
• polyfill.io: Een service die polyfills levert op basis van de user agent. (https://polyfill.io/)
• Can I use...: Een website die up-to-date browserondersteuningstabellen biedt voor verschillende webtechnologieën. (https://caniuse.com/)
• MDN Web Docs: Uitgebreide documentatie voor webtechnologieën. (https://developer.mozilla.org/nl-NL/)
• WCAG (Web Content Accessibility Guidelines): Internationale standaarden voor webtoegankelijkheid. (https://www.w3.org/WAI/standards-guidelines/wcag/)

Conclusie

Progressive enhancement is een waardevolle benadering van webontwikkeling die een consistente en toegankelijke gebruikerservaring garandeert over een breed scala aan browsers en apparaten. Door gebruik te maken van functiedetectie en polyfills, kunt u de nieuwste webtechnologieën benutten en tegelijkertijd een solide basis bieden voor gebruikers met oudere browsers. Dit verbetert niet alleen de gebruikerservaring, maar ook de toegankelijkheid, SEO en toekomstbestendigheid van uw webapplicaties. Het omarmen van de principes van progressive enhancement leidt tot robuustere, beter onderhoudbare en gebruiksvriendelijkere websites voor een wereldwijd publiek.